import React, { useImperativeHandle, useRef } from 'react';

const Child = React.forwardRef((props, ref)=>{

  const numRef = useRef(null)
  const pswRef = useRef(null)
  // useImperativeHandle 该 hooks 可以让我们使用 ref 的时候自定义暴露给父组件的内容
  useImperativeHandle(ref , ()=>{
    return {
      name: '小张',
      age: 100,
      userid: numRef.current,
      psw: pswRef.current
    }
  })

  return (<>
    <div>
      Child： <br />
      账号：<input type="text" ref={numRef}  />
      <br />
      密码：<input type="text" ref={pswRef}  />
    </div>
  </>)
})

const App = () => {

  const inpRef = useRef(null)

  return (
    <div>
        <Child ref={inpRef} />
        <button onClick={()=>{
          console.log(inpRef.current.name,inpRef.current.age);
          console.log(inpRef.current.userid.value,inpRef.current.psw.value);
        }}>获取输入的内容</button>
    </div>
  );
};

export default App;
